<template>
  <main id="water-fall-container">
    <VirtualWaterfall
      v-if="!(data.page === 1 && waterfallOption.loading)"
      id="water-fall"
      :virtual="waterfallOption.virtual"
      :gap="waterfallOption.gap"
      :preload-screen-count="[
        waterfallOption.topPreloadScreenCount,
        waterfallOption.bottomPreloadScreenCount
      ]"
      :item-min-width="waterfallOption.itemMinWidth"
      :max-column-count="waterfallOption.maxColumnCount"
      :min-column-count="waterfallOption.minColumnCount"
      :calc-item-height="calcItemHeight"
      :items="data.list"
    >
      <template #default="{ item }: { item: ItemOption }">
        <Card @click="handleCardOpen(item)" :item="item" :onlyImage="waterfallOption.onlyImage">
        </Card>
      </template>
    </VirtualWaterfall>
    <div v-else class="w-full h-full fixed top-0" flex="~ justify-center items-center"><Loading /></div>
    <div id="loading-wrapper" v-if="waterfallOption.loading && data.page > 1"><Loading /></div>
  </main>
  <!-- <AsideComp v-if="isDev" :data="data" :backTop="backTop" :waterfallOption="waterfallOption" /> -->
</template>

<script setup lang="ts">
import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'
import Card from './Card.vue'
import useWaterfall from './useWaterfall'
import type { ItemOption } from './types'
import Loading from '@/components/Loading.vue'
defineOptions({ name: 'waterfall' })
const { waterfallOption, data, calcItemHeight, handleCardOpen } = useWaterfall()
</script>

<style lang="scss" scoped>
#water-fall-container {
  height: 100vh;
  margin-top: 72px;
}
#loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
</style>
